<template>
	<div>
		<el-row class="tac">
			<el-col :span="8">
				<el-card class="box-card" :style="{height:height}">
					<div>
						<h4>字典主表</h4>
						<el-button type="text" @click="showAdd">添加字典</el-button>
						<el-button type="text" @click="showDictMasterEdit(selectRow)">编辑字典</el-button>
						<el-button type="text" @click="showDel(selectRow)">删除字典</el-button>
					</div>
					<br />
					<el-table :data="masterData" showOverflowTooltip style="width: 100%" stripe border tooltip-effect="dark" @selection-change="handleSelectionChange" @row-click="rowClick" ref="multipleTable">
						<el-table-column type="selection" width="40" > </el-table-column>
						<el-table-column prop="dict_key" label="字典Key" show-overflow-tooltip></el-table-column>
						<el-table-column prop="dict_name" label="字典名称" show-overflow-tooltip></el-table-column>
						<el-table-column prop="dict_type" label="分类" show-overflow-tooltip></el-table-column>
					</el-table>
				</el-card>
			</el-col>
			<el-col :span="16">
				<el-card class="box-card" :style="{height:height}">
					<div>
						<h4>{{ msg }}字典表</h4>
						<h5 v-if="!seen" style="color: #D2D7DC;">请选择角色</h5>
						<el-button type="text" @click="showAddDict" v-if="seen">添加明细</el-button>
						<!--<el-button type="text" @click="showAdd" v-if="seen">删除明细</el-button>-->
					</div>
					<br />
					<el-table :data="dictData" showOverflowTooltip style="width: 100%" stripe border tooltip-effect="dark" >
						<!--<el-table-column type="selection" width="50" > </el-table-column>-->
						<el-table-column prop="dict_key" label="字典Key" show-overflow-tooltip></el-table-column>
						<el-table-column prop="dict_id" label="字典id" show-overflow-tooltip></el-table-column>
						<el-table-column prop="detail_name" label="字典名称" show-overflow-tooltip></el-table-column>
						<el-table-column label="操作" width="160">
							<template slot-scope="scope">
								<el-button size="small" type="primary" @click="showDictEdit(scope.$index,scope.row)">编辑</el-button>
								<el-button size="small" type="primary" @click="delDetail(scope.$index,scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
			</el-col>
		</el-row>
		<!--新增界面-->
		<el-dialog :title="text" :visible.sync="addFormVisible" :close-on-click-modal="false" style="padding-bottom:0;" @close="resetForm('addForm')">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm"
			style="height:240px;">
				<el-form-item label="字典key" prop="dict_key">
					<el-input v-model="addForm.dict_key" auto-complete="off" placeholder="请输入字典key" :disabled="input_disabled"></el-input>
				</el-form-item>
				<el-form-item label="字典名称" prop="dict_name">
					<el-input v-model="addForm.dict_name" auto-complete="off" placeholder="请输入字典名称"></el-input>
				</el-form-item>
				<el-form-item label="分类" prop="dict_type">
					<el-input v-model="addForm.dict_type" auto-complete="off" placeholder="请输入分类"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer" style="text-align: left; margin-left:30px;margin-left:80px;">
				<el-button type="primary" @click.native="addDictMaster">提交</el-button>
				<el-button @click="reset()">重置</el-button>
			</div>
		</el-dialog>
		<!--新增字典明细-->
		<el-dialog :title="text" :visible.sync="addDetailVisible" :close-on-click-modal="false" style="padding-bottom:0;">
			<el-form :model="addDictForm" label-width="80px" :rules="addDictFormRules" ref="addDictForm"
			style="height:240px;">
				<el-form-item label="字典key">
					<el-input v-model="dictKey" auto-complete="off" disabled></el-input>
				</el-form-item>
				<el-form-item label="字典id" prop="dict_id">
					<el-input v-model="addDictForm.dict_id" auto-complete="off" placeholder="请输入字典id" :disabled="input_disabled"></el-input>
				</el-form-item>
				<el-form-item label="明细名称" prop="detail_name">
					<el-input v-model="addDictForm.detail_name" auto-complete="off" placeholder="请输入字典名称"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer" style="text-align: left; margin-left:30px;margin-left:80px;">
				<el-button type="primary" @click.native="addDict">提交</el-button>
				<el-button @click="resetForm()">重置</el-button>
			</div>
		</el-dialog>
		
	</div>
</template>

<script>
	import { query, apiparas, execute } from '../../api/api';
	import { Cookie } from '../../js/common';
	export default {
		data() {
			return {
				height:document.documentElement.clientHeight*0.87 + 'px',
				currentPage: 1,
				pagesize: 10,
				masterData: [],
				dictData:[],
				dictKey:'',
				text:'',
				editId:'',
				input_disabled:false,
				select_detailrow:'',
				addFormVisible:false,
				addDetailVisible:false,
				addForm:{
					dict_key:'',
					dict_name:'',
					dict_type:''
					},
				addDictForm:{
					detail_name:'',
					dict_id:''
				},
				isAddShow:false,
				isEditShow:false,
				addFormRules: {
					dict_key: [
				        { required: true, message: '请输入字典key', trigger: 'blur' },
				        //{ validator: validaePass }
			        ],
			     	dict_name: [
				        { required: true, message: '请输入字典名称', trigger: 'blur' },
				        //{ validator: validaePass }
			        ]
				},
				addDictFormRules:{
					dict_key: [
				        { required: true, message: '请输入字典key', trigger: 'blur' },
				        //{ validator: validaePass }
			        ],
			     	detail_name: [
				        { required: true, message: '请输入字典名称', trigger: 'blur' },
				        //{ validator: validaePass }
			        ],
			        dict_id: [
				        { required: true, message: '请输入字典id', trigger: 'blur' },
				        //{ validator: validaePass }
			        ]
				},
				selectRow:'',
				selectIndex:'',
				//主表选择行数据
				multipleTable:[],
				msg:''
			}
		},
		components: {
			//注册组件
		},
		mounted: function() {
			//生命周期
		},
		computed: {
			//计算属性
			company_key(){
				let company_key = Cookie.Get("company_key");
				return company_key;
			},
			seen(){
				if(this.dictKey===''){
					return false;
				}else{
					return true;
				}
			}
		},
		methods: { //函数
	       	//点击主表行事件
	        rowClick(row, event, column){
	        	this.selectRow = row;
				this.msg = row.dict_name;
				this.dictKey = row.dict_key;
				this.toggleSelection(row);
				this.getDict();
	        },
	        toggleSelection(rows) {
		        if (this.multipleTable.length>0) {
		            this.$refs.multipleTable.clearSelection();
		        } 
		        this.$refs.multipleTable.toggleRowSelection(rows);
	      	},
	      	handleSelectionChange(val){
				this.multipleTable = val;
			},
			reset:function(){//重置
				if (this.isEditShow) {
					this.addForm.dict_key = this.selectRow.dict_key;
					this.addForm.dict_name = this.selectRow.dict_name;
					this.addForm.dict_type = this.selectRow.dict_type;
				}else{
					this.addForm = {
						dict_key:'',
						dict_name:'',
						dict_type:''
					};
				}
			},
			showdata: function() { //查询数据
				//显示数据
				var jsonparas = [];
				//增加查询条件
				//查询汇总
				let _paras = apiparas.getParas('default','sys|get_dict_master', jsonparas);
				query(_paras).then(response => {
					var json_data = response.result;
					this.masterData = json_data;
					this.$notify({title: '成功信息',message: '数据加载完毕！',type: 'success'});
				});
			},
			//新增字典主表
			showAdd: function() {  //显示新增对话框
				this.addFormVisible = true;
				this.text = '新增';
				this.isEditShow = false;
				this.input_disabled = false;
				this.addForm = {
					dict_key:'',
					dict_name:'',
					dict_type:''
				}
			},
			//新增字典表
			showAddDict:function(){
				this.addDetailVisible = true;
				this.text = '新增';
				this.isEditShow = false;
				this.input_disabled = false;
				this.addDictForm = {
					detail_name:'',
					dict_id:''
				}
			},
			//编辑字典主表
			showDictMasterEdit:function(row){
				this.addFormVisible = true;
				this.text = '编辑';	
				this.input_disabled = true;
				this.addForm.dict_key = row.dict_key;
				this.addForm.dict_name = row.dict_name;
				this.addForm.dict_type = row.dict_type;
				this.isEditShow = true;
			},
			//编辑字典表
			showDictEdit:function(index,row){
				
				this.select_detailrow=row;
				this.addDetailVisible = true;
				this.text = '编辑';	
				this.input_disabled = true;
				this.addDictForm.detail_name = row.detail_name;
				this.addDictForm.dict_id = row.dict_id;
				this.isEditShow = true;
			},
			//获取字典表信息
			getDict:function(){
				var jsonparas = [];
				//增加查询条件
				apiparas.pushPara(jsonparas, 'dict_key', this.dictKey);
				//查询汇总
				let _paras = apiparas.getParas('default','sys|get_dict', jsonparas);
				query(_paras).then(response => {
					this.dictData = response.result;
					
				});
			},
			//添加或修改字典主表
			addDictMaster:function(){//提交
				if (this.isEditShow) {
					//处理修改
					let jsonparas = [
						{'name': 'dict_key','value':  this.addForm.dict_key},
						{'name': 'dict_name','value':this.addForm.dict_name},
						{'name': 'dict_type','value':this.addForm.dict_type}
					]
					//查询汇总
					let _paras = apiparas.getParas('default','sys|update_dict_master', jsonparas);
					execute(_paras).then(response => {
						if(response.errid == 0){
							this.addFormVisible = false;
							this.$notify({title: '成功信息',message: '修改成功！',type: 'success',duration:1500});
							this.showdata();
						}
						else
						{
							this.$notify.error({title: '错误',message:response.errmsg ,type:'error',duration:1500});
						}
					});	
				}else{
					//处理添加
					let jsonparas = [
						{'name': 'dict_key','value':  this.addForm.dict_key},
						{'name': 'dict_name','value':this.addForm.dict_name},
						{'name': 'dict_type','value':this.addForm.dict_type}
					];
					//查询汇总
					let _paras = apiparas.getParas('default','sys|insert_dict_master', jsonparas);
					execute(_paras).then(response => {
						if(response.errid == 0){
							this.addFormVisible = false;
							this.$notify({title: '成功信息',message: '添加成功！',type: 'success',duration:1500});
							this.showdata();
						}
						else
						{
							this.$notify.error({title: '错误',message:response.errmsg ,type:'error',duration:1500});
						}
					});					
				}
				
			},
			//添加或修改字典表
			addDict:function(){//提交
				if (this.isEditShow) {
					
					//增加查询条件
					let jsonparas = [
						{'name': 'dict_key','value':  this.dictKey},
						{'name': 'dict_id','value':  this.addDictForm.dict_id},
						{'name': 'detail_name','value':this.addDictForm.detail_name}
					]
					//查询汇总
					let _paras = apiparas.getParas('default','sys|update_dict', jsonparas);
					execute(_paras).then(response => {
						if(response.errid == 0){
							this.addDetailVisible = false;
							this.$notify({title: '成功信息',message: '修改成功！',type: 'success',duration:1500});
							this.getDict();
						}
						else
						{
							this.$notify.error({title: '错误',message:response.errmsg ,type:'error',duration:1500});
						}
					});	
				}else{
					//处理添加
					
					//增加查询条件
					let jsonparas = [
						{'name': 'dict_key','value':  this.dictKey},
						{'name': 'dict_id','value':  this.addDictForm.dict_id},
						{'name': 'detail_name','value':this.addDictForm.detail_name}
					];
					//查询汇总
					let _paras = apiparas.getParas('default','sys|insert_dict', jsonparas);
					execute(_paras).then(response => {
						if(response.errid == 0){
							this.addDetailVisible = false;
							this.$notify({title: '成功信息',message: '添加成功！',type: 'success',duration:1500});
							this.getDict();
						}
						else
						{
							this.$notify.error({title: '错误',message:response.errmsg ,type:'error',duration:1500});
						}
					});					
				}
				
			},
			//删除字典表
			delDetail:function(index,row){
				let key = row.dict_key;
				let id = row.dict_id;
				let name = row.detail_name;
				
				this.$confirm('是否确定删除字典名为：'+name+'的数据字典?', '提示', {
          			confirmButtonText: '确定',
          			cancelButtonText: '取消',
          			type: 'warning'
        		}).then(() => {
        			var jsonparas = [];
          			apiparas.pushPara(jsonparas,'dict_key',key);
          			apiparas.pushPara(jsonparas,'dict_id',id);
					let _paras = apiparas.getParas('default','sys|del_dict', jsonparas);
					execute(_paras).then(response => {
						if(response.errid == 0){
							this.$notify({title:'删除',message:'成功删除',type:'success'});
							this.getDict();
						}
						else
						{
							this.$notify.error({title: '错误',message: '删除失败'});
						}
					});	
        		}).catch(() => {
          			this.$message({
            			type: 'info',
            			message: '已取消删除'
         			});          
        		});
			},
			resetForm:function(){//重置
				if (this.isEditShow) {
					this.dict_key = this.select_detailrow.dict_key;
					this.addDictForm.dict_id = this.select_detailrow.dict_id;
					this.addDictForm.detail_name = this.select_detailrow.detail_name;
				}else{
					this.addForm = {
						dict_key:'',
						dict_name:'',
						dict_type:''
					};
			}
			},
			//删除字典主表
			showDel:function(row){
				let key = row.dict_key;
				let name = row.dict_name;
				this.$confirm('是否确定删除字典名为：'+name+'的数据字典?', '提示', {
          			confirmButtonText: '确定',
          			cancelButtonText: '取消',
          			type: 'warning'
        		}).then(() => {
        			var jsonparas = [];
          			apiparas.pushPara(jsonparas,'dict_key',key);
					let _paras = apiparas.getParas('default','sys|del_dict_master', jsonparas);
					execute(_paras).then(response => {
						if(response.errid == 0){
							this.$notify({title:'删除',message:'成功删除',type:'success'});
							this.msg = '';
							this.showdata();
						}
						else
						{
							this.$notify.error({title: '错误',message: '删除失败'});
						}
					});	
        		}).catch(() => {
          			this.$message({
            			type: 'info',
            			message: '已取消删除'
         			});          
        		});
			},
			showExport:function() //导出
			{
				this.downloadLoading = true
				require.ensure([], () => {

					const {
						export_json_to_excel
					} = require('@../../vendor/Export2Excel')
					const tHeader = ['部门ID','部门名称','部门说明','创建时间','修改时间'];
					const filterVal = ['department_id','department_name','remarks','create_time','update_time'];
					const list = this.roleDate;
					const _data = this.formatJson(filterVal, list);
					export_json_to_excel(tHeader, _data, '部门管理','部门管理');
				})
			},
			formatJson(filterVal, jsonData) {
				return jsonData.map(v => filterVal.map(j => v[j]))
			},
			tableRowClassName(row, rowIndex) {
				return '';
			},
			handleSizeChange: function(size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
				this.currentPage = currentPage;
			},

		},
		created: function() {
			this.showdata();
		},
		watch: {
			filterText(val) {
        		this.$refs.tree.filter(val);
      		}
		}
	}
</script>

<style>

</style>